<template>
  <el-dialog title="更新评阅" :visible.sync="dialogVisible" width="550px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-row class="row" :gutter="20">
      <el-col>
        <span>评阅编号：{{commentInfo.comNo}}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col>
        <span>评阅分数：</span>
        <el-input-number v-model="commentInfo.comScore" controls-position="right" :min="0" :max="100"></el-input-number>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>评阅内容：</el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <el-input type="textarea" :rows="8" v-model="commentInfo.comContent"></el-input>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <el-button plain type="danger" class="row-button" @click="updateComment">更新评阅</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'TeacherCommentDialog',
  props: {
    visible: Boolean,
    commentInfo: Object
  },
  data () {
    return {
      dialogVisible: false,
      editComScore: 0,
      editComContent: ''
    }
  },
  methods: {
    updateComment () {
      this.$axios.put(`/api/comment/${this.commentInfo.comNo}`, this.commentInfo)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.$message.success('更新成功！')
            this.dialogVisible = false
          } else {
            this.$message.error(result.msg)
          }
        })
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
    },
    dialogVisible () {
      this.$emit('update:visible', this.dialogVisible)
    }
  },
  mounted () {
    this.editComScore = this.comScore
    this.editComContent = this.comContent
  }
}
</script>

<style lang="stylus" scoped>
div >>> .el-dialog__body {
  padding-bottom: 10px;
}

.row {
  margin: 15px;
}

.row-button {
  width: 100%;
}
</style>
